A Gantt chart showing multiple events per row

By using nested arrays you can show multiple events per row (with tooltips).

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.resizing.js"></script>
<script src="RGraph.gantt.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="800" height="350">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
            var data = [
                // First row
                [
                    [5, 10, null, 'Maths', 'Gradient(#fdd:red)'],
                    [16, 8, null, 'Maths', 'Gradient(#fdd:red)']
                ],
                            
                // Second row
                [
                    [0, 10, null, 'French', 'Gradient(#dfd:green)'],
                    [14, 10, null, 'French', 'Gradient(#dfd:green)']
                ],
                            
                // Third row
                [
                    [0, 5, null, 'German', 'Gradient(pink:#ff69b4)'],
                    [6, 5,null, 'German', 'Gradient(pink:#ff69b4)'],
                    [12, 5,null, 'German', 'Gradient(pink:#ff69b4)'],
                    [18, 5,null, 'German', 'Gradient(pink:#ff69b4)']
                ],
                            
                // Fourth row - only one event on this row
                [5, 15,null, 'Polish', 'Gradient(#ffffbb:orange)'],
                            
                // Fifth row
                [
                    [5, 5,null, 'Dutch', 'Gradient(#faa:pink)'],
                    [11, 5,null, 'Dutch', 'Gradient(#faa:pink)']
                ]
            ];

        var gantt = new RGraph.Gantt({
            id: 'cvs',
            data: data,
            options: {
                tooltips: ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
                hmargin: 10,
                xmax: 24,
                resizable: true,
                textAccessible: true,
                textAccessiblePointerevents: false,
                labelsInbar: [
                    'Maths', 'Maths',
                    'French', 'French',
                    'German','German','German','German',
                    'Polish',
                    'Dutch','Dutch'
                ],
                labelsInbarAlign: 'center',
                labelsInbarFont: 'Arial',
                labelsInbarSize:22,
                labelsInbarColor: '#333',
                vmargin: 10
            }
        }).draw();
    };
</script>